<template>
    <qly-base-page padding="0" :showNavBar="false" show-bg-image>
        <view class="login-box">
            <view class="header-box">
                <view class="left-box">
                    <view class="hello">hello!</view>
                    <view class="desc">{{ $t('common.welcomeToTheTravelApp') }}</view>
                </view>
                <image class="logo-phone" src="/static/logo.png"/>
            </view>
            <view class="form-card">
                <uni-forms ref="formRef" :model="form" :rules="rules" label-position="top"
                           label-width="400rpx">
                    <uni-forms-item name="account" :label="$t('form.account')" required>
                        <view class="input-box">
                            <up-input type="text" v-model="form.account" border="none"
                                      clearable :placeholder="$t('form.pleaseEnterYourAccount')"/>
                        </view>
                    </uni-forms-item>
                    <uni-forms-item name="password" :label="$t('form.password')" required>
                        <view class="input-box">
                            <up-input type="password" v-model="form.password" border="none"
                                      clearable :placeholder="$t('form.pleaseEnterYourPassword')"/>
                        </view>
                    </uni-forms-item>
                    <view class="update-text">
                        <text @tap="switchLanguages">{{ $t('common.switchLanguages') }}</text>
                        <view class="update-text">
                            <text @tap="changePassword('updatePassword')">{{ $t('common.updatePassword') }}</text>
                            <text @tap="changePassword('forgetPassword')">{{ $t('common.forgetPassword') }}</text>
                        </view>
                    </view>
                    <view class="login-btn">
                        <up-button :text="$t('form.login')" color="#5572f0" size="large"
                                   @tap="qly.form.pass(submit,formRef)"></up-button>
                    </view>
                </uni-forms>
                <view class="agreement">
                    <qly-radio :checked="agreement" @tap="agreement = !agreement"/>
                    <text>{{ $t('common.readAndAgreed') }}</text>
                    <text class="link" @click="toAgreement">《{{ $t('common.serviceAgreement') }}》</text>
                    {{ $t('common.and') }}
                    <text class="link" @click="toAgreement">《{{ $t('common.privacyPolicy') }}》</text>
                </view>
            </view>
        </view>
    </qly-base-page>
    
    
    <uni-popup ref="alertDialogRef" type="dialog">
        <uni-popup-dialog type="info" cancelText="取消" confirmText="同意" title="提示" @confirm="confirm">
            <view class="agree-desc-text">
                {{ $t('common.readAndAgreed') }}
                <text class="link" @click="toAgreement">《{{ $t('common.serviceAgreement') }}》</text>
                {{ $t('common.and') }}
                <text class="link" @click="toAgreement">《{{ $t('common.privacyPolicy') }}》</text>
            </view>
        </uni-popup-dialog>
    </uni-popup>
</template>
<script setup>

const alertDialogRef = ref()
const agreement = ref(false)
const formRef = ref()
const form = ref({
    account: '',
    password: '',
})

const rules = {
    // 对name字段进行必填验证
    account: {
        // name 字段的校验规则
        rules: [
            // 校验 name 不能为空
            {
                required: true,
                errorMessage: $t('form.pleaseEnterYourAccount'),
            },
        ],
    },
    password: {
        // name 字段的校验规则
        rules: [
            // 校验 name 不能为空
            {
                required: true,
                errorMessage: $t('form.pleaseEnterYourPassword'),
            },
        ],
    }
}

// 登录
const submit = async () => {
    console.log('agreement', agreement.value)
    
    if (!agreement.value) {
        alertDialogRef.value.open()
        return
    }
    confirm()
}
const confirm = async () => {
    const newForm = qly.tool.deepCopy(form.value)
    console.log('newForm', newForm)
    newForm.password = qly.auth.encryptPassword(newForm.password)
    
    const res = await qly.api.auth.login(newForm)
    if (res.success) {
        qly.dialog.success('登录成功')
        await qly.auth.handleLoginResult(res)
        uni.reLaunch({
            url: '/pages/tabBar/home/index'
        })
    } else {
        qly.dialog.apiError(res).catch()
    }
}

// 协议
const toAgreement = () => {
    qly.page.open('/pages/my/agreement/index')
}

// 修改密码
const changePassword = (type) => {
    qly.page.open('/pages/my/changePassword/index', {type})
}

// 切换语言
const switchLanguages = () => {
    qly.page.open('/pages/my/language/index')
}
</script>
<style lang="scss" scoped>
.login-box {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 100rpx 0 0;
    box-sizing: border-box;
    .header-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        padding: 100rpx 32rpx;
        box-sizing: border-box;
        
        .left-box {
            .hello {
                font-family: D-DIN-DIN, D-DIN-DIN;
                font-weight: bold;
                font-size: 80rpx;
                text-align: left;
                font-style: normal;
                text-transform: none;
                color: #293845;
            }
            
            .desc {
                color: #293845;
                font-weight: bold;
                font-size: 34rpx;
            }
        }
        
        .logo-phone {
            width: 160rpx;
            height: 160rpx;
            border-radius: 12rpx;
        }
    }
    
    .form-card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        width: 92%;
        margin: 0 auto;
        padding: 32rpx;
        box-sizing: border-box;
        border-radius: 18rpx;
        background-color: #fff;
        
        .input-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            height: 80rpx;
            background: #F5F5F5;
            border-radius: 16rpx;
            font-size: 32rpx;
            box-sizing: border-box;
            padding: 0 24rpx;
            
            .input {
                width: 100%;
            }
            
            .code-box {
                margin-right: 50rpx;
            }
        }
    }
}

.login-btn {
    margin-top: 120rpx;
}

.agreement {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 64rpx 0;
    color: #82848a;
    
    
}

.agree-desc-text {
    font-size: 24rpx;
}

.link {
    color: #3C9CFF;
}

.update-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18rpx;
    color: #3C9CFF;
}
</style>
